import React, { useState } from 'react';
import { Collapse, Input, Button, Tabs, Form, message } from 'antd';
import { SearchOutlined, SendOutlined } from '@ant-design/icons';
import Layout from '../components/layout/Layout';
import styles from '../styles/Help.module.css';

const { Panel } = Collapse;
const { TabPane } = Tabs;
const { TextArea } = Input;

const HelpPage = () => {
  const [form] = Form.useForm();
  const [activeKey, setActiveKey] = useState('faq');
  const [searchValue, setSearchValue] = useState('');

  // FAQ数据
  const faqData = [
    {
      category: '常见问题',
      questions: [
        {
          question: '网站上的工具是免费使用的吗？',
          answer: '是的，我们的所有工具都是免费使用的。我们不会对基本功能收费，也没有隐藏收费项目。'
        },
        {
          question: '我的文件安全吗？会被保存在服务器上吗？',
          answer: '您的安全是我们的首要考虑因素。所有上传的文件仅用于处理，不会被永久存储。处理完成后，文件会在24小时内从我们的服务器自动删除。'
        },
        {
          question: '文件上传有大小限制吗？',
          answer: '是的，考虑到服务器性能和用户体验，我们对上传文件大小有所限制。图片文件限制为5MB，压缩文件限制为100MB。如果您需要处理更大的文件，建议先将其分割成小块再上传。'
        }
      ]
    },
    {
      category: '图片工具',
      questions: [
        {
          question: '支持哪些图片格式？',
          answer: '我们支持大多数常见的图片格式，包括JPG、JPEG、PNG、WEBP、GIF、BMP等。一些特定工具可能对格式有特殊要求，具体请参考各工具页面的说明。'
        },
        {
          question: '压缩图片会损失画质吗？',
          answer: '图片压缩过程中可能会有一定程度的画质损失，但我们使用先进的算法保证在减小文件大小的同时，最大限度地保留图片质量。您可以通过调整压缩质量参数来平衡文件大小和画质。'
        },
        {
          question: 'OCR功能识别准确率如何？',
          answer: 'OCR文字识别的准确率取决于图片质量、文字清晰度、文字语言等因素。对于清晰的打印文本，识别准确率通常在95%以上。对于手写文字或低质量图片，准确率可能会降低。'
        }
      ]
    },
    {
      category: '文件工具',
      questions: [
        {
          question: '压缩文件支持哪些格式？',
          answer: '我们的文件压缩工具支持ZIP、RAR、7Z等常见压缩格式。您可以将多个文件一起压缩成这些格式。'
        },
        {
          question: '如何设置压缩级别？',
          answer: '在使用文件压缩工具时，您可以选择不同的压缩级别，从"低"到"高"。较高的压缩级别会得到更小的文件大小，但可能需要更长的处理时间。'
        }
      ]
    }
  ];

  // 教程数据
  const tutorialData = [
    {
      title: '如何压缩图片',
      steps: [
        '访问首页，点击"图片工具"，然后选择"图片压缩"',
        '点击上传区域或将图片拖拽到上传区域',
        '选择合适的压缩质量（建议70-80之间）',
        '点击"开始压缩"按钮',
        '压缩完成后，点击"下载压缩图片"保存结果'
      ]
    },
    {
      title: '如何裁剪图片',
      steps: [
        '访问首页，点击"图片工具"，然后选择"图片裁剪"',
        '上传需要裁剪的图片',
        '在预览区域拖动选择框调整裁剪范围',
        '可以设置固定比例或自由裁剪',
        '点击"裁剪"按钮',
        '裁剪完成后，点击"下载"保存结果'
      ]
    },
    {
      title: '如何识别图片中的文字',
      steps: [
        '访问首页，点击"图片工具"，然后选择"OCR文字识别"',
        '上传包含文字的图片',
        '选择文字语言（如中文、英文等）',
        '点击"开始识别"按钮',
        '识别完成后，可以复制识别结果或下载为TXT文件'
      ]
    }
  ];

  // 处理反馈提交
  const handleFeedbackSubmit = (values) => {
    console.log('反馈信息: ', values);
    message.success('感谢您的反馈！我们会认真听取您的意见。');
    form.resetFields();
  };

  // 过滤FAQ
  const filteredFaq = searchValue === '' 
    ? faqData 
    : faqData.map(category => ({
        ...category,
        questions: category.questions.filter(q => 
          q.question.toLowerCase().includes(searchValue.toLowerCase()) || 
          q.answer.toLowerCase().includes(searchValue.toLowerCase())
        )
      })).filter(category => category.questions.length > 0);

  return (
    <Layout title="帮助中心 - 在线工具平台" description="获取使用帮助和常见问题解答">
      <div className={styles.helpHeader}>
        <div className={styles.container}>
          <h1 className={styles.pageTitle}>帮助中心</h1>
          <p className={styles.pageDescription}>
            查找常见问题解答，获取工具使用教程，或向我们提交反馈
          </p>
          
          <div className={styles.searchBox}>
            <Input
              placeholder="搜索问题..."
              prefix={<SearchOutlined />}
              value={searchValue}
              onChange={e => setSearchValue(e.target.value)}
              size="large"
            />
          </div>
        </div>
      </div>

      <div className={styles.helpContent}>
        <div className={styles.container}>
          <Tabs activeKey={activeKey} onChange={setActiveKey} className={styles.helpTabs}>
            <TabPane tab="常见问题" key="faq">
              {searchValue && filteredFaq.length === 0 ? (
                <div className={styles.noResults}>
                  <p>未找到与"{searchValue}"相关的问题</p>
                </div>
              ) : (
                filteredFaq.map((category, index) => (
                  <div key={index} className={styles.faqCategory}>
                    <h2>{category.category}</h2>
                    <Collapse bordered={false} className={styles.faqCollapse}>
                      {category.questions.map((item, i) => (
                        <Panel 
                          header={item.question} 
                          key={`${index}-${i}`}
                          className={styles.faqPanel}
                        >
                          <p>{item.answer}</p>
                        </Panel>
                      ))}
                    </Collapse>
                  </div>
                ))
              )}
            </TabPane>
            
            <TabPane tab="使用教程" key="tutorials">
              <div className={styles.tutorialsContainer}>
                {tutorialData.map((tutorial, index) => (
                  <div key={index} className={styles.tutorialCard}>
                    <h3>{tutorial.title}</h3>
                    <ol className={styles.stepsList}>
                      {tutorial.steps.map((step, i) => (
                        <li key={i}>{step}</li>
                      ))}
                    </ol>
                  </div>
                ))}
              </div>
            </TabPane>
            
            <TabPane tab="提交反馈" key="feedback" id="feedback">
              <div className={styles.feedbackForm}>
                <p className={styles.feedbackIntro}>
                  非常感谢您使用我们的平台。如果您有任何建议、问题或发现了bug，请通过以下表单告诉我们。
                </p>
                
                <Form
                  form={form}
                  layout="vertical"
                  onFinish={handleFeedbackSubmit}
                >
                  <Form.Item
                    name="email"
                    label="您的邮箱"
                    rules={[
                      { type: 'email', message: '请输入有效的邮箱地址' },
                      { required: true, message: '请输入您的邮箱' }
                    ]}
                  >
                    <Input placeholder="example@email.com" />
                  </Form.Item>
                  
                  <Form.Item
                    name="type"
                    label="反馈类型"
                    rules={[{ required: true, message: '请选择反馈类型' }]}
                  >
                    <select className={styles.selectInput}>
                      <option value="">请选择反馈类型</option>
                      <option value="bug">问题报告</option>
                      <option value="feature">功能建议</option>
                      <option value="question">使用咨询</option>
                      <option value="other">其他</option>
                    </select>
                  </Form.Item>
                  
                  <Form.Item
                    name="content"
                    label="反馈内容"
                    rules={[{ required: true, message: '请输入反馈内容' }]}
                  >
                    <TextArea 
                      rows={6} 
                      placeholder="请详细描述您的问题或建议..."
                    />
                  </Form.Item>
                  
                  <Form.Item>
                    <Button 
                      type="primary" 
                      htmlType="submit"
                      icon={<SendOutlined />}
                      size="large"
                    >
                      提交反馈
                    </Button>
                  </Form.Item>
                </Form>
              </div>
            </TabPane>
          </Tabs>
        </div>
      </div>
    </Layout>
  );
};

export default HelpPage; 